<template>
    <div class="todos">
        <h2>{{ getTodoCount() }}项代办</h2>
        <div class="todo-container">
            <div class="todo-wrap">
                <!-- <MyHeader :addTodo="addTodo"/> -->
                <!-- 更改成自定义事件方式实现 子传父 数据 -->
                <MyHeader @addTodo="addTodo" />
                <MyTodoList :todoObjList="todoObjList" />
                <MyFooter :todoObjList="todoObjList" :checkAllTodo="checkAllTodo"
                    :clearAllCompleted="clearAllCompleted" />
            </div>
        </div>
    </div>
</template>

<script>
import MyFooter from '../todos/MyFooter.vue'
import MyHeader from '../todos/MyHeader.vue'
import MyTodoList from '../todos/MyTodoList.vue'
export default {
    name: 'TodosApp',
    components: {
        MyFooter,
        MyHeader,
        MyTodoList
    },
    data() {
        return {
            todoObjList: JSON.parse(localStorage.getItem('todoObjList')) || []
        }
    },
    methods: {
        addTodo(todoObj) {
            if (todoObj.title.trim().length === 0) return
            console.log("addTodo收到了数据：", todoObj)
            // 向数组中添加数据
            this.todoObjList.unshift(todoObj)
        },
        // 变更todo状态
        updateTodoStatus(id) {
            this.todoObjList.forEach(item => {
                if (item.id === id) {
                    item.completed = !item.completed
                }
            })
        },
        // 删除todo
        deleteTodo(id) {
            console.log("deleteTodoId:", id)
            if (!confirm('确定要删除吗？')) return
            this.todoObjList = this.todoObjList.filter(item => item.id !== id)
        },
        // 实现全选or全不选
        checkAllTodo(todoStatus) {
            this.todoObjList.forEach(item => item.completed = todoStatus)
        },
        // 清除已完成todo
        clearAllCompleted() {
            //filter过滤返回值为false的结果 如果是true则保留结果组成新的数组
            this.todoObjList = this.todoObjList.filter(item => !item.completed)
        },
        // 修改todo数据
        updateTodo(todoObj) {
            this.todoObjList.forEach(item => {
                if (item.id === todoObj.id) {
                    item.title = todoObj.title,
                        item.isEdit = todoObj.isEdit
                }
            })
        },
        getTodoCount() {
            //计算未完成的数量
            return this.todoObjList.filter(item => !item.completed).length
        },
        //发请求拿到学生数据 async关键字用于异步操作
        async getStudentData() {
            axios.get('http://localhost:8080/api/students').then(
                response => {
                    console.log('请求成功了，', response)
                    console.log(response.data)
                },
                error => {
                    console.log('请求失败了，', error.message, error)
                }
            ).catch(error => {
                console.log('请求失败了，catch:', error.message)
            })
        },
        async getCarData() {
            axios.get('http://localhost:8080/car/cars').then(
                response => {
                    console.log('请求成功了，', response)
                    console.log(response.data)
                },
                error => {
                    console.log('请求失败了，', error.message, error)
                }
            ).catch(error => {
                console.log('请求失败了，catch:', error.message)
            })
        }
    },
    watch: {
        //监视todoObjList数组的变化 存入localStorage
        todoObjList: {
            deep: true,
            handler() {
                // 默认不是深度监视，如果对象内部属性发生了变化不会监视到，要写handler，
                // 如果只想监视某一个属性，可以给这个属性加上deep:true
                localStorage.setItem('todoObjList', JSON.stringify(this.todoObjList))
            }
        }
    },
    mounted() {
        // 绑定事件
        this.$bus.$on('updateTodoStatus', this.updateTodoStatus)
        this.$bus.$on('deleteTodo', this.deleteTodo)
        this.$bus.$on('updateTodo', this.updateTodo)
        // this.getStudentData()
        // this.getCarData()
        console.log('todos app挂载完毕')
    },
    beforeDestroy() {
        // 移除事件监听 解绑对应的事件
        this.$bus.$off('updateTodoStatus')
        this.$bus.$off('deleteTodo')
        this.$bus.$off('updateTodo')
        console.log('todos app销毁了')
    }
}
</script>

<style scoped>
.todos {
    border: 1px solid rgb(234, 229, 229);
    margin-top: 5px;
    padding-bottom: 10px;
}
.todo-container {
  width: 600px;
  margin: 0 auto;
}

.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>